<!--
 * @Project_description: {{routerName}}表单
-->
<template>
  <d2-container class="{name}">
    <!-- 顶部内容 -->
    <template slot="header">
      <div class="base-header">
        <!-- 左边 -->
        <div class="base-header-l">
          <el-form :inline="true" :model="request" ref="request" class="header-form-inline" label-position="right"
                   :disabled="loading" label-width="100px">
            <!-- 文本 -->
            <el-form-item label="姓名" prop="userNameLike">
              <el-input v-model="request.userNameLike" placeholder="请输入姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select v-model="request.state" placeholder="请选择状态">
                <el-option label="启用" :value="0" />
                <el-option label="禁用" :value="1" />
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 下方按钮组-->
          <div class="base-header-b" style="margin-left: 95px">
            <div class="base-header-btn">
              <el-button type="primary" @click="select" :disabled='loading'>搜索</el-button>
            </div>
            <div class="base-header-btn">
              <el-button plain @click="reset" :disabled='loading'> 重置</el-button>
            </div>
          </div>
        </div>
        <!-- 右边按钮组 -->
        <div class="base-header-r">
          <div class="base-header-btn">
            <el-button type="primary" @click="$refs.add.init()" v-if='_auth("add")'>添加</el-button>
          </div>
          <!--导入下载模板-->
          <div class="base-header-btn">
            <el-button type="warning" @click="$refs.importExl.open=true">导入</el-button>
            <y-import-exl @click='importExl' @uploadTemplate='uploadTemplate' ref='importExl' />
          </div>
          <div class="base-header-btn">
            <el-button type="info" @click="expTableList">导出</el-button>
          </div>
        </div>
      </div>
    </template>
    <!-- 内容 -->
    <el-table :data="list" ref="list" style="width: 100%" v-loading="loading">
      <el-table-column
        width="80"
        type="index"
        label="序号"
        align="center"
        :index="(p) => p + 1 + (request.pageNo - 1) * request.pageSize" />
      <el-table-column label="头像" prop='avatarImg'>
        <template slot-scope="{ row }">
          <y-image v-model="row.avatarImg"></y-image>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column prop="accountNumber" label="账号"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="idCard" label="身份证"></el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="{ row }">
          <span class="text-info" v-if="row.state == 0">启用</span>
          <span class="text-error" v-if="row.state == 1">禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注">
        <template slot-scope="{ row }">
          <y-remark v-model='row.remarks' />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <span class="base-row-btn" @click="update(row)"
                v-if='_auth("edit")'>修改</span>
          <el-popconfirm title="确定从列表中移除吗？" @confirm="deleteBy(row)"
                         v-if='_auth("del")'>
            <span class='base-row-btn' slot="reference">删除</span>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <addVue ref="add" @load="getList" />
    <!-- 底部 -->
    <template slot="footer">
      <div class="base-footer-btn">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="request.pageSize"
          :current-page.sync="request.pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>
  </d2-container>
</template>

<script>
  import addVue from '../components/add.vue'
  import { mapState } from 'vuex'

  export default {
    name: '{{name}}-table',
    // import引入的组件需要注入到对象中才能使用
    components: {
      addVue,
    },
    data() {
      // 这里存放数据
      return {
        // 加载状态
        loading: false,
        //数据
        list: [],
        //总条数
        total: 0,
        //请求参数
        request: {
          pageSize: 10,
          pageNo: 1,
            {{name}}Id:'',
        },
      }
    },
    // 监听属性 类似于data概念
    computed: {
      ...mapState('tree/{{name}}', [
        '{{name}}Id',
      ]),
    },
    // 监控data中的数据变化
    watch: {
        {{name}}Id(o) {
        this.request.{{name}}Id = o
        this.getList()
      },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.getList()
    },
    // 方法集合
    methods: {
      // list
      async getList() {
        this.loading = true
        try {
          let res = await this.$api.{{name}}.list(this.request)
          this.total = res.data.total
          this.list = res.data.rows
          this.loading = false
        } catch (error) {
          this.loading = false
        }
      },
      // put
      update(row) {
        //重新copy一份对象，不要在原本上修改
        let rows = this.deepClone(row)
        this.$refs.add.init(rows)
      },
      //delete
      async deleteBy(row) {
        // 删除
        let data={
            {{name}}Id:row.{{name}}Id
        }
        await this.$api.user.del(data)
        this.$message.success('删除成功')
        this.getList()
      },
      //翻页
      handleCurrentChange(val) {
        this.request.pageNo = val
        this.getList()
      },
      // 换页码
      handleSizeChange(e) {
        this.request.pageSize = e
        this.getList()
      },
      // 搜索
      select() {
        this.request.pageNo = 1
        this.getList()
      },
      // 重置
      reset() {
        this.request.pageNo = 1
        this.$refs.request.resetFields()
        this.getList()
      },
      /*表格操作*/
      // 导入表格
      importExl({ header, results }) {
        console.log(header, results)
        this.$message.success('导出成功')
        this.getList()
      },
      //下载空模板
      uploadTemplate() {
        //如果这个不满足,请查看控制台自行复制需要的
        let table = this._getTable(this.$refs.list)
        this._expTable(table, '用户导入模板')
      },
      // 导出list
      async expTableList() {
        const loading = this.$loading({
          text: '正在下载...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        // 获取对象
        //如果这个不满足,请查看控制台自行复制需要的
        let table = this._getTable(this.$refs.list)
        //重新copy一份对象，不要在原本上修改
        let req = JSON.parse(JSON.stringify(this.request))
        req.pageNo = 1
        req.pageSize = 9999
        try {
          let res = await this.$api.{{name}}.list(req)
          this._expTable(table, '{{routerName}}', res.rows)
          loading.close()
        } catch (error) {
          this.$message.error('导出失败')
          loading.close()
          this.$log.push(error)
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  //@import url(); 引入公共css类

  ::v-deep .d2-container-full {
    border: none !important;
    right: 0 !important;
  }

  ::v-deep .d2-container-full__body {
    background: none !important;
  }
</style>
